<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>人员介绍</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript"
	src="<%=basePath%>/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet"
	href="<%=basePath%>/fancybox/source/jquery.fancybox.css?v=2.1.5"
	type="text/css" media="screen" />
<script type="text/javascript"
	src="<%=basePath%>/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet"
	href="<%=basePath%>/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5"
	type="text/css" media="screen" />
<script type="text/javascript"
	src="<%=basePath%>/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript"
	src="<%=basePath%>/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<link rel="stylesheet"
	href="<%=basePath%>/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7"
	type="text/css" media="screen" />
<script type="text/javascript"
	src="<%=basePath%>/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
	
<link rel="stylesheet" href="<%=basePath%>/css/common.css" />
<script src="<%=basePath%>/js/jquery.easing.js" ></script>
<script src="<%=basePath%>/js/delayloading.js" ></script>
<script src="<%=basePath%>/js/jquery.shCircleLoader.js" type="text/javascript"></script>
<link href="<%=basePath%>/css/jquery.mCustomScrollbar.css" rel="stylesheet" /> 
<script src="<%=basePath%>/js/jquery.mCustomScrollbar.concat.min.js"></script>

<!-- 配置fancybox -->
<script type="text/javascript">
	$(document).ready(function() {
		$(".fancybox").fancybox();
		$("a#inline").fancybox({
			'hideOnContentClick' : true
		});
		<%-- //加载数据
		$.ajax({
			url:'<%=basePath%>/admin/getValueForIndex',
			success:function(data) {
				for (var i=0; i<data.length; i++) {
					var obj = data[i];
					//插入标题
					var title = $('<h1><strong>' + obj.departmentName + '</strong></h1><hr/>');
					$('#main').append(title);
					var employerList = obj.employerList;
					for(var j=0; j<employerList.length; j++) {
						var tmp = employerList[j];
						//创建row
						var row = $('<div class="row"><div class="col-sm-6 col-md-3"><div class="thumbnail"><a id="inline" href="#' + tmp.empId + '"><img src="<%=basePath%>' + tmp.headPic + '" alt="..." class="img-rounded img-responsive"></a></div></div></div>');
						row.append(row);
						$('#main').append(row);
						
					}
				}				
			}
		}); --%>
	});
	
	$('#loading').shCircleLoader();
	$(window).load(function(){
		$('#loading').hide();
		$(".cont").css("display","block");
		$(".tag").delayLoading({
		speed:"data-s",
		direction:"left"
		});
		$("#article").mCustomScrollbar({
					scrollButtons:{
						enable:true
					}
				});
		
	});
</script>
</head>
<body>
	<div class="head">
		<p class="title_top"><a style="float:none" href="/">公司logo</a></p>
	</div>
	<div id="loading"></div>
	<div class="container bs-docs-container" style="width: 960px" id="main">
		<c:forEach var="emp" items="${empList}">
		<h1>
			<strong>${emp.departmentName}</strong>
		</h1>
		<hr/>
		<div class="row">
			<c:forEach var="employer" items="${emp.employerList}">
			<div class="col-sm-6 col-md-3">
				<div class="thumbnail">
					<a id="inline" href="#${employer.empId}">
						<img src="<%=basePath%>${employer.headPic}" alt="${employer.name}" class="img-rounded img-responsive">
					</a>
					<div class="caption">
						<h3>${employer.name}</h3>
						<hr>
						<h4>${employer.positionName}</h4>
					</div>
				</div>
				<div style="display: none;">
					<div id="${employer.empId}" class="container" >
						<div class="row">
							<div class="col-sm-12 col-md-6">
								<img src="<%=basePath%>${employer.bigPic}" alt="${employer.name}" class="img-rounded img-responsive">
							</div>
							<div class="col-sm-12 col-md-6">
								<div class="row">
									<div class="col-sm-4 col-md-3">
										<h3><strong>姓名：</strong></h3>
									</div>
									<div class="col-sm-8 col-md-9">
										<h3>${employer.name}</h3>
									</div>
								</div>
								<hr/>
								<div class="row">
									<div class="col-sm-4 col-md-3">
										<h3><strong>部门：</strong></h3>
									</div>
									<div class="col-sm-8 col-md-9">
										<h3>${emp.departmentName}</h3>
									</div>
								</div>
								<hr/>
								<div class="row">
									<div class="col-sm-4 col-md-3">
										<h3><strong>职位：</strong></h3>
									</div>
									<div class="col-sm-8 col-md-9">
										<h3>${employer.positionName}</h3>
									</div>
								</div>
								<hr/>
								<div class="row">
									<div class="col-sm-4 col-md-3">
										<h3><strong>简介：</strong></h3>
									</div>
									<div class="col-sm-8 col-md-9">
										<textarea rows="6" cols="28" disabled="disabled" style="font-size:25px;resize: none;">${employer.info}</textarea>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			</c:forEach>
		</div>
		</c:forEach>
	</div>
	<jsp:include page="footer.jsp" />
</body>
</html>